<template>
	<view class="content">
		<view class="pageTitle">
			<!-- <u-swiper :list="swiperlist" name="adv_image"></u-swiper> -->
			<image v-if="swiperlist.length" :src="swiperlist[0].adv_image" mode="widthFix"></image>
		</view> 
				<!-- 盲盒活动  start-->
				<view class="subsidyArr">
					<view class="subsidyArrItem" v-for="(item,index) in theBestBoxArr" :key="index" @click="goPage('/pages/theBestBox/detail',{boxId : item.blindbox_id })" >
						<view class="cover">
							<u-image  mode="widthFix"  width="700" height="640" lazy-load :src="item.image" :fade="true" duration="450">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
						<view class="info">
							<text>{{item.name}}</text>
							<view class="desc">
								{{item.remark}}
							</view>
							<view class="price">
								<text>￥{{item.price}}</text>
								<view class="btn">
									马上拼
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 盲盒活动  end-->
	
		
	</view>
</template>

<script>
	// import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	// import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		// mixins: [MescrollMixin],
		// mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				swiperlist: [], // 轮播图列表
				theBestBoxArr:[]
			}
		},
		async onLoad() {
			this.init();
		},
		onReady() {
			
		},
		onShow() {
			// #ifdef MP-WEIXIN
			const version = wx.getSystemInfoSync().SDKVersion
			console.log('版本库-----'+version);
			// #endif
		},
		methods: {
			init() {
				this.getActiveArr()
				this.getswiperlist();
			},
			// 
			getActiveArr(){
				this.myHttp({
					url: '/surpriseblindbox/api/Blindbox/list'
				}).then(res=>{
					this.theBestBoxArr = res.data.list
				})
			},
			// 获取轮播图数据
			getswiperlist() {
				this.myHttp({
					url: '/api/Adv/detail',
					data: {
						keyword : 'APP_SURPRISE_BLINDBOX'
					},
				}).then(res=>{
					this.swiperlist = res.data.adv_list
				})
				// 请求示例    url , 所需参数, 项目配置
				// this.$http.get('/addons/yun_shop/api.php?i=3&type=2&route=test.sliads&ingress=weChatApplet&validate_page=1&app_type=wechat',{}, {'paramsType': 2}).then(res => {
				
				// 	this.swiperlist = res.data
				// })
			},
		}
	}
</script>

<style>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	
	}
	

</style>

<style lang="scss" scoped>
	.content{
		background-color: #F8F8F8;
		// padding-top: 180upx;
		.pageTitle{
			width: 100%;
			height: 425rpx;
			background: #E5DFD4;
			display: flex;
			align-items: flex-end;
			image{
				width: 100%;
			}
			// text{
			// 	display: flex;
			// 	justify-content: center;
			// 	font-size: 31rpx;
			// 	font-family: PingFang SC;
			// 	font-weight: 500;
			// 	color: #FFFFFF;
			// }
		}
		
	
		.subsidyArr{
			margin-top: 26rpx;
			padding-bottom: 100rpx;
			.subsidyArrItem{
				display: flex;
				flex-direction: column;
				margin: 0 27rpx 16rpx;
				background-color: #fff;
				border-radius: 20rpx;
				height: 885rpx;
				margin-bottom: 30rpx;
				.cover{
					width: 100%;
					height: 640rpx;
					border-radius: 20rpx;
					image{
						width: 100%;
						height: 640rpx;
						// background: #FFF4D8;
						border-radius: 20rpx;
					}
				}
				.info{
					height: 245rpx;
					// flex: 1;
					// margin-left: 43upx;
					padding: 20rpx 30rpx;
					display: flex;
					flex-direction: column;
					text{
						font-size: 33rpx;
						font-weight: 600;
						color: #222020;
					}
					.desc{
						flex: 1;
						margin-top: 15rpx;
						color: #939292;
					}
					.price{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text{
							color: #FA250F; 
							font-weight: 400;
						}
						.btn{
							width: 149rpx;
							height: 58rpx;
							background: $themeColor;
							border-radius: 32px;
							display: grid;
							place-items: center;
							color: #fff;
						}
					}
				}
			}
		}
	
	
	
	
	
	}
</style>
